<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
			<greet name2="子组件1 张三" ref="greet1"></greet>
			<greet name2="子组件2 李四" ref="greet2"></greet>
		</div>
		
		<script>
			var app = Vue.createApp({
				data() {
					return {
						"message": "Hello Vue!",
						"name":"Tom"
					}
				},
				methods:{
					sayHi(){
						console.log("root:Hi,"+this.name);
					}
				},
				mounted(){
					console.log("父组件mounted():"+ this.$refs.greet1.name2)
					console.log("父组件mounted():"+this.$refs.greet2.name2)
				}
			});
			
			app.component("greet",{
				props:['name2'],
				data(){
					return { "name":"jerry"}
				},
				created(){
					console.log("greet组件:created()方法")
					this.$root.sayHi();
				},
				template:`
				<div>
					<div>根组件:{{$root.name}},父组件:{{$parent.name}}本组件:{{name}}</div>
					<div>传入的属性{{name2}}</div></div>
				</div>
				`
			})
			
			
			var vm = app.mount("#app")
		</script>



	</body>
</html>